
import React, { useEffect, useState, useRef } from 'react'
import { TrendingUp, TrendingDown } from 'lucide-react'

interface StatsCardProps {
  title: string
  icon: React.ReactNode
  color: string
  value: string
  trend: {
    value: string
    isUp: boolean
  }
  delay?: number
}

const StatsCard: React.FC<StatsCardProps> = ({ title, icon, color, value, trend, delay = 0 }) => {
  const [displayValue, setDisplayValue] = useState('0')
  const [isVisible, setIsVisible] = useState(false)
  const cardRef = useRef<HTMLDivElement>(null)

  // 解析数字值（移除逗号）
  const numericValue = parseInt(value.replace(/,/g, ''))

  useEffect(() => {
    // 延迟显示动画
    const timer = setTimeout(() => {
      setIsVisible(true)
    }, delay)

    return () => clearTimeout(timer)
  }, [delay])

  useEffect(() => {
    if (!isVisible) return

    // 数字计数动画
    const duration = 1500 // 动画持续时间
    const startTime = Date.now()
    const startValue = 0

    const animate = () => {
      const elapsed = Date.now() - startTime
      const progress = Math.min(elapsed / duration, 1)
      
      // 使用缓动函数
      const easeOutQuart = 1 - Math.pow(1 - progress, 4)
      const currentValue = Math.floor(startValue + (numericValue - startValue) * easeOutQuart)
      
      // 格式化数字（添加逗号）
      const formattedValue = currentValue.toLocaleString('en-US')
      setDisplayValue(formattedValue)

      if (progress < 1) {
        requestAnimationFrame(animate)
      } else {
        setDisplayValue(value) // 确保最终值正确
      }
    }

    requestAnimationFrame(animate)
  }, [isVisible, numericValue, value])

  return (
    <div 
      ref={cardRef}
      className={`group relative bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-xl hover:scale-[1.02] transition-all duration-300 overflow-hidden ${
        isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'
      }`}
      style={{ transitionDelay: `${delay}ms` }}
    >
      {/* 背景装饰渐变 */}
      <div className={`absolute top-0 right-0 w-32 h-32 ${color} opacity-5 rounded-full blur-3xl group-hover:opacity-10 transition-opacity duration-300`}></div>
      
      {/* 顶部图标和趋势 */}
      <div className="flex items-center justify-between mb-4 relative z-10">
        <div className={`${color} p-3 rounded-xl text-white shadow-lg transform group-hover:scale-110 group-hover:rotate-3 transition-all duration-300`}>
          {icon}
        </div>
        <div className={`flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-semibold ${
          trend.isUp 
            ? 'bg-green-50 text-green-600 border border-green-200' 
            : 'bg-red-50 text-red-600 border border-red-200'
        }`}>
          {trend.isUp ? <TrendingUp size={14} /> : <TrendingDown size={14} />}
          <span>{trend.value}</span>
        </div>
      </div>

      {/* 标题 */}
      <h3 className="text-gray-500 text-sm font-medium mb-3 relative z-10">{title}</h3>

      {/* 数值 */}
      <div className="text-3xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-4 relative z-10">
        {displayValue}
      </div>

      {/* 底部装饰线 */}
      <div className="relative z-10">
        <div className={`h-1.5 ${color} rounded-full w-full opacity-30 group-hover:opacity-50 transition-opacity duration-300`}></div>
      </div>
    </div>
  )
}

export default StatsCard






